<template>
  <div class="content-div">
    <div class="bread" :class="{ collapse: $store.state.app.isCollapsed === 'true' }">
      水质信息
    </div>
    <div>
      <ul class="list-filter">
        <li>
          <p>记录日期</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p>网箱编号</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p>网箱名称</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p style="margin-top: 25px">
            <el-button size="small" type="primary">查询</el-button>
          </p>
        </li>
      </ul>
      <div class="list-wrapper mt10">
        <p>
          <el-button type="primary" size="small" @click="edit('new')">添加水质信息</el-button>
        </p>
        <el-table
          header-row-class-name="table-list-header"
          row-class-name="table-list-row"
          class="mt10" :data="tableData">
          <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
          >
            <template slot-scope="scope" >
              <template v-if="item.prop === 'operation'">
                <el-link @click="edit('edit', scope.row)" type="primary">修改</el-link>
                <el-link @click="goDetail" class="ml10" type="primary">网箱信息</el-link>
              </template>
              <span v-else>
                {{ scope.row[item.prop] }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="txc">
          <el-pagination
            class="mt20"
            layout="prev, pager, next"
            :total="50">
          </el-pagination>
        </div>
      </div>
    </div>
    <template>
      <EditWater v-if="showEdit" :edit-type="editType" :row="curRow" @modal-close="handleModalClose" />
    </template>
  </div>
</template>
<script>
import EditWater from '../components/EditWaterInfoPro'
export default {
  components: { EditWater },
  data () {
    return {
      columns: [
        {
          label: '网箱编号',
          prop: 'boxId'
        },
        {
          label: '网箱名称',
          prop: 'boxName'
        },
        {
          label: '记录日期',
          prop: 'date'
        },
        {
          label: '水温',
          prop: 'temp'
        },
        {
          label: '溶解氧',
          prop: 'ox'
        },
        {
          label: 'PH值',
          prop: 'ph'
        },
        {
          label: '电导率(%)',
          prop: 'electric'
        },
        {
          label: '氨氮含量(%)',
          prop: 'an'
        },
        {
          label: '总有机碳(%)',
          prop: 'carbon'
        },
        {
          label: '浊度(%)',
          prop: 'turbidity'
        },
        {
          label: '操作',
          prop: 'operation',
          width: 200
        }
      ],
      tableData: [
        {
          id: '20201004001',
          boxId: '20201004001',
          boxName: '网箱一号',
          date: '2020-10-04 13:00:00',
          temp: '10',
          ox: '3',
          ph: '7.1',
          electric: '60',
          an: 80,
          carbon: '3',
          turbidity: 30
        }
      ],
      showEdit: false,
      curRow: {},
      editType: 'new'
    }
  },
  methods: {
    goEdit () {
      this.$router.push('editBox')
    },
    edit (type, data = {}) {
      this.editType = type
      this.curRow = data
      this.showEdit = true
    },
    handleModalClose (info) {
      this.showEdit = false
      if (info.update) {}
    },
    goDetail () {
      this.$router.push('boxDetail')
    }
  }
}
</script>
<style lang="scss">

</style>
